iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 20
0
自我挑戰組

溫故知新 JavaScript系列 第 20

Day20- 什麼是 DOM

  • 分享至 

  • xImage
  •  

https://ithelp.ithome.com.tw/upload/images/20201003/20129439AtsdTUF2ad.jpg
關於 DOM 可以在網路上找到更多 詳細的介紹,這邊我就用我的理解跟大家做簡單介紹,DOM 的英文是(Document Object Model-文件物件模型),每一個在HTML的標籤或是寫內容文字都算是 Object(物件),而這些物件都會構成一個類似樹狀的模型!

今天寫了一份 HTML 經過瀏覽器的解析後它會呈現這樣的樹狀結構:

在這個樹狀的結構中每個元素都被視為一個節點,可以透過 JavaScript 去改變這些元素的屬性或是標籤內的文字,這樣就能達成透過 JS 跟網頁去做各種互動了,包括改變元素的顏色或是更換標籤的屬性等等的.....

querySelector 選擇單一元素

剛已經知道可以透過 JS 藉由 DOM 這個存在瀏覽器的介面去改變 HTML 元素,那如何選擇元素呢,那就是用 querySelector 選取的語法如下:

HTML

<div id='demo'>我是標題<div>

JS

document.querySelector('#demo').textContent ="更改標題";
//選取 ID 這個標籤

像上面的語法一樣就能去選取到標籤,如果今天不是id 而是一個 class 那就變成下面這樣,如果您學過 CSS 的話就知道這個就像是CSS選取器的語法是一樣的。

document.querySelector('.demo').textContent ="更改標題";
//選取 class 這個標籤

querySelectorAll 重複選取多個元素

這個語法是可以一次選取同樣的元素,一份 html 可能有很多元素是重複的如果用剛剛的querySelector 語法不就要一個一個去選取,此時用這語法就可以把全部 class 都是 demo 的元素選取起來一次替換要變更的內容,語法如下:

document.querySelectorAll('.demo').textContent ="更改標題";
//更改了全部 class 都是 demo 的元素內容

setAttribute 增加標籤屬性

前面有提到透過 JS 可以跟網頁的元素有很多的互動,當然也能變更屬性如果今天HTML結構是這樣:
HTML

<a href="#">我是 GOOGLE 網站</a>

JS

document.querySelector('a').setAttribute('href','http://www.google.com.tw');

setAttribute('屬性名稱','屬性內容') 用這樣的方法就能在原本沒有網址的連結放入一個網址了,當然也可以去更改顏色囉!再看看以下語法:
HTML

<div id='demo'>我是標題<div>

CSS

#demo{
  color:red;
  font-size: 30px;
}

JS

document.querySelector('#demo').setAttribute('id','demo');

getAttribute 取得標籤屬性值

這邊還可以取得標籤的屬性例如我想要知道這個標籤屬性的值,寫法如下:
HMTL

 <a href="http://www.google.com">我是 GOOGLE 網站</a>

JS

document.querySelector('a').getAttribute('href');

額外補充

每次如果要變選取文字或變更文字都要打 document.querySelector('#demo').textContent ="更改標題";
其實可以用變數把這個指令存起來像是這樣

var el = document.querySelector('#demo');

這樣如果要變更內容或是變更屬性只需要這樣打就可以囉!

el.textContent = "更改標題" //改內容
el.setAttribute('href','http://www.google.com.tw'); //增加屬性

今天介紹了幾種透過 JS 去操作 DOM 的方法,後續我們會在介紹更多,休息一下迎接明天的內容吧!


上一篇
Day19- 迴圈加上控制判斷
下一篇
Day21- 插入 HTML 標籤的兩種方法
系列文
溫故知新 JavaScript30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言